.header-box {
    height: 92px;
    border: 1px solid;
    border-image: linear-gradient(-90deg, rgba(0, 187, 234, 0), rgba(3, 77, 129, 1), rgba(0, 161, 254, 0)) 1 1;
    box-shadow: inset 0px 0px 46px 0px rgba(8, 91, 168, 0.4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 48px;

    h3 {
        font-size: 24px;
        color: #fff;
        font-weight: bold;
    }

    .header-tab {
        a {
            display: inline-block;
            height: 41px;
            width: 164px;
            border-radius: 2px;
            background-color: rgba(1, 103, 145, .4);
            transform: skew(-15deg, 0);
            box-shadow: inset 0px 0px 16px 0px rgba(1, 103, 145, 1);
            margin-right: 10px;
            font-size: 14px;
            color: #fff;
            font-weight: bold;
            line-height: 41px;
            text-align: center;
            font-style: normal;

            &:last-child {
                margin-right: 0;
            }

            &:hover {
                background-color: rgba(1, 103, 145, .8);
            }
            &.active{
                background-color: rgba(1, 103, 145, .8);
            }

            >span {
                display: inline-block;
                transform: skew(15deg, 0);
            }
        }
    }
}

.main-flex-box {
    display: flex;
    justify-content: space-between;
}



.left-box,
.right-box {
    width: 24.4%;

    .chart {
        margin-bottom: 30px;

        .chart-title {
            height: 45px;
            line-height: 45px;
            background: linear-gradient(90deg, rgba(2, 89, 130, 0.29) 0%, rgba(3, 96, 140, 0) 100%);
            font-size: 16px;
            color: #00CCFF;
            padding-left: 20px;
            box-sizing: border-box;
        }

        .chart-box {
            height: 240px;
            margin-top: 10px;
            background: linear-gradient(-39deg, rgba(12, 116, 214, 0.1), rgba(19, 50, 121, 0.1));
            border: 1px solid;
            border-image: radial-gradient(circle, rgba(13, 54, 78, 0.35), rgba(3, 110, 154, 0.35)) 1 1;

            .chart-img-box {
                width: 100%;
                height: 100%;
                background: url('../images/jiaotong.png') no-repeat center;
                background-size: 100% 100%;
            }
            .stars-box{
                width: 100%;
                margin-top:15px;
                .stars-img{
                    width: 61px;
                    margin-left: 15%;
                    >img{
                        display: block;
                        width: 100%;
                    }
                }
                .stars-chart{
                    width: 100%;
                    height: 20px;
                }
            }
        }



        &:last-child {
            margin-bottom: 0;
        }
    }

    .chart-flex-box {
        display: flex;
        justify-content: space-between;

        >div {
            flex: 1;
        }
    }

    .comments {
        height: 564px;
        overflow: hidden;
        padding: 0 10px;
        margin-top: 10px;
        background: linear-gradient(-39deg, rgba(12, 116, 214, 0.1), rgba(19, 50, 121, 0.1));
        border: 1px solid;
        border-image: radial-gradient(circle, rgba(13, 54, 78, 0.35), rgba(3, 110, 154, 0.35)) 1 1;

        .comments-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: calc(100% - 8px);
            margin: 0 auto;
            height: 49px;
            padding: 6px;
            box-sizing: border-box;
            margin-top: 16px;
            border-radius: 10px;
            background-color: rgba(1, 103, 145, 0.15);
            font-size: 12px;

            .nickname {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .img-box {
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    overflow: hidden;

                    >img {
                        display: block;
                        width: 100%;
                        line-height: 0;
                    }
                }

                span {
                    display: inline-block;
                    color: #00CCFF;
                    margin-left: 8px;
                    max-width: 46px;
                    line-height: 16px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }

            >p {
                flex: 1;
                margin: 0 17px;
                color: #fff;
                line-height: 18px;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .time-box {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                >p {
                    color: #fff;
                    text-align: right;
                }

                img {
                    vertical-align: middle;
                }

                i {
                    font-family: Microsoft YaHei;
                    font-style: normal;
                    color: #FFB651;
                }
            }
        }
    }
}

@media screen and (max-width: 1440px) {
    .center-box {
        .center-top {
            .center-number {
                >span {
                    width: 24px !important;
                }


            }
        }
    }
}

.center-box {
    padding: 0 15px;
    flex: 1;

    .center-top,
    .center-top-flex {
        margin-top: 46px;

        h3 {
            font-size: 18px;
            width: 100%;
            text-align: center;
            color: #fff;
        }

        .center-number {

            width: 100%;
            height: 44px;
            text-align: center;
            margin-top: 30px;

            >span {
                display: inline-block;
                vertical-align: bottom;
                width: 31px;
                margin: 0 3px;
                height: 44px;
                background: rgba(0, 53, 178, 0.3);
                border: 2px solid;
                border-image: linear-gradient(0deg, rgba(36, 196, 255, 1), rgba(0, 87, 194, 1)) 10 10;
                font-size: 20px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                text-align: center;
                line-height: 44px;
                color: #89EAFF;
            }

            >i {
                color: #fff;
                font-size: 16px;
            }

            >em {
                font-size: 16px;
                color: #89EAFF;
            }

        }



    }

    .center-top-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;

        >div {
            flex: 1;
        }
    }


    .center-tap {
        text-align: center;
        height: 46px;
        line-height: 46px;
        margin-top: 60px;
        margin-bottom: 30px;

        >a {
            display: inline-block;
            padding: 0 10px;
            height: 100%;
            border-radius: 2px;
            transform: skew(-15deg, 0);
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
            background-color: rgba(1, 103, 145, 0.2);

        }

        >a:hover,
        >a.active {
            background-color: rgba(1, 103, 145, 1);
        }

    }

    .chart-center-china {
        height: 650px;
        margin-top: 10px;

    }

    .chart-center-box {
        position: relative;
        .center-tab-item{
            position: absolute;
            top:0;
            left:0;
            width: 100%;
        }
        .chart {
            margin-bottom: 30px;

            .chart-title {
                height: 45px;
                line-height: 45px;
                background: linear-gradient(90deg, rgba(2, 89, 130, 0.29) 0%, rgba(3, 96, 140, 0) 100%);
                font-size: 16px;
                color: #00CCFF;
                padding-left: 20px;
                box-sizing: border-box;
            }

            .chart-box {
                height: 290px;
                margin-top: 10px;
                background: linear-gradient(-39deg, rgba(12, 116, 214, 0.1), rgba(19, 50, 121, 0.1));
                border: 1px solid;
                border-image: radial-gradient(circle, rgba(13, 54, 78, 0.35), rgba(3, 110, 154, 0.35)) 1 1;

                .chart-img-box {
                    width: 100%;
                    height: 308px;
                    background: url('../images/reli.png') no-repeat center;
                    background-size: 100% 100%;
                }

                .time-line-box {
                    position: relative;
                    margin-top: 20px;
                    margin: 20px  10px 0 10px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-around;

                    .line-box {
                        position: absolute;
                        top: 3px;
                        left: 0;
                        width: 100%;
                        height: 1px;
                        background-color: rgba(0, 215, 255, 0.5);
                    }

                    .time-line-item {
                        z-index: 2;
                        cursor: pointer;
                        a {
                            position: relative;
                            display: block;
                            width: 7px;
                            height: 7px;
                            margin: 0 auto;
                            margin-bottom: 10px;
                            border-radius: 50%;
                            background-color: #fff;
                            box-sizing: border-box;
                            z-index: 2;
                           &::before{
                               display: none;
                               position: absolute;
                               top: -3px;
                               left: -3px;
                               content: '';
                               width: 13px;
                               height: 13px;
                               border: 1px solid #00D7FF;
                               border-radius: 50%;
                               box-sizing: border-box;
                               background-color: transparent;
                           }
                          
                        }

                        span {
                            color: #fff;
                            font-size: 12px;
                            text-align: center;

                        }
                        &:hover{
                            a{

                                background-color: #00D7FF;
                            }
                            
                        }
                        &.active{
                            a{

                                background-color: #00D7FF;
                                &::before{
                                    display: block;
                                }
                            }
                            span{
                                color: #00D7FF;
                            }
                        }
                    }
                }
            }



            &:last-child {
                margin-bottom: 0;
            }
        }

        .chart-flex-box {
            display: flex;
            justify-content: space-between;

            >div {
                flex: 1;
            }
        }
    }
}

.main-bottom-box {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;

    >div {
        flex: 1;
        margin-right: 20px;

        &:last-child {
            margin-right: 0;
        }

        .bottom-title {
            height: 45px;
            line-height: 45px;
            background: linear-gradient(90deg, rgba(2, 89, 130, 0.29) 0%, rgba(3, 96, 140, 0) 100%);
            font-size: 16px;
            color: #00CCFF;
            padding-left: 20px;
            box-sizing: border-box;
        }

        .bottom-content-box {
            margin-top: 10px;
            height: 240px;
            padding: 14px;
            box-sizing: border-box;
            background: linear-gradient(-39deg, rgba(12, 116, 214, 0.1), rgba(19, 50, 121, 0.1));
            border: 1px solid;
            border-image: radial-gradient(circle, rgba(13, 54, 78, 0.35), rgba(3, 110, 154, 0.35)) 1 1;

            .bottom-content-title {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;

                .title-left {
                    span {
                        color: #fff;
                        font-size: 12px;
                        margin-right: 10px;
                    }

                    .select-box {
                        position: relative;
                        width: 130px;
                        height: 25px;
                        display: inline-block;
                        vertical-align: middle;

                        a {
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            padding-left: 10px;
                            background: rgba(0, 53, 178, 0.3);
                            border: 1px solid;
                            border-image: linear-gradient(0deg, rgba(36, 196, 255, 1), rgba(0, 87, 194, 1)) 10 10;
                            line-height: 23px;
                            box-sizing: border-box;
                            color: #00CCFF;
                            font-size: 12px;

                            &::before {
                                position: absolute;
                                top: 7px;
                                right: 10px;
                                content: '';
                                width: 5px;
                                height: 5px;
                                border: 1px solid #FFFFFF;
                                border-top: 0;
                                border-right: 0;
                                transform: rotate(-45deg)
                            }
                        }
                    }

                    .dropDown {
                        display: none;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        transform: translateY(100%);
                        width: 100%;
                        padding-left: 10px;
                        box-sizing: border-box;
                        border: 1px solid;
                        border-image: linear-gradient(0deg, rgba(36, 196, 255, 1), rgba(0, 87, 194, 1)) 10 10;
                        background: rgba(0, 53, 178, 0.3);
                        z-index: 999;

                        li {
                            height: 25px;
                            color: #00CCFF;
                            line-height: 25px;

                            &:hover {
                                color: #89EAFF;
                            }
                        }
                    }

                }

                .title-right {
                    font-size: 12px;
                    color: #fff;
                    line-height: 23px;
                }
            }

            .video-box {
                display: flex;
                justify-content: space-between;
                margin-top: 20px;

                video {
                    width: 49%;
                    height: 162px;
                    margin-right: 10px;

                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
    }
}